/*
 * @Author: chenwei
 * @Date: 2022-02-17 17:32:05
 * @LastEditors: chenwei
 * @LastEditTime: 2022-02-25 11:56:33
 * @FilePath: \React\react-demo\8 表单.jsx
 * @Description:
 *
 */

// 1.0 受控组件 input textarea select 都自己维护组件的状态
class NameForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    console.log(event.target.value);
    this.setState({
      value: event.target.value,
    });
  }

  handleSubmit(event) {
    console.log("this is submit", this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字：
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          ></input>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
ReactDOM.render(<NameForm />, document.getElementById("root"));

// 2.0 select 组件
class SelectFrom extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value,
    });
  }

  handleSubmit(event) {
    console.log("this is submit", this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          请选择：
          <select onChange={this.handleChange} value={this.state.value}>
            <option value="one">选择一</option>
            <option value="two">选择二</option>
            <option value="three">选择三</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
ReactDOM.render(<SelectFrom />, document.getElementById("root"));

// 3.0 多输入组件（在state中多增加几个变量， 实现过程与上述代码相似）
